<template>
    <div class="prompt_box">
        <div class="prompt" v-for="(prompt, index) in prompts" :key="index" @click="changePrompt(prompt.value)">
            {{ prompt.label }}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            prompts: [],
        }
    },
    watch: {
        "$store.state.dict.prompt":{
            handler(value){
                if(value){
                    let promptOptions = [];
                    Object.keys(value).forEach(e=>{
                        promptOptions.push({
                        label: e,
                        value: value[e]
                        })
                    })
                    this.prompts = promptOptions;
                }
            }
        }
    },
    created(){
        let value = this.$store.state.dict.prompt;
        if(value){
            let promptOptions = [];
            Object.keys(value).forEach(e=>{
                promptOptions.push({
                label: e,
                value: value[e]
                })
            })
            this.prompts = promptOptions;
        }
    },
    methods: {
        changePrompt(value){
            console.log(value);
            
            this.$emit('update:newMessage', value);
        }
    }
}
</script>

<style lang="less" scoped>
.prompt_box {
    padding: 0 15px;
    .prompt {
        display: inline-block;
        border: 1px dotted #409EFF;
        border-radius: 10px;
        cursor: pointer;
        font-size: 20px;
        padding: 5px;
        margin: 5px;
    }
    .prompt:hover {
        background-color: #c4ddf5;
    }
}
</style>